<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
		.site_con {
			display: flex;
			justify-content: space-between; /* 分隔表单和按钮 */
			align-items: start; /* 对齐到顶部 */
		}

		.button-group {
			display: flex;
			flex-direction: column;
			align-items: center; /* 水平居中按钮 */
			margin-right: 50px; /* 距离右侧边缘50px */
		}

	</style>
</head>
<body>
	<div th:replace="header::top"></div>


	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>
	<br>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info" class="active">· 个人信息</a></li>
				<li><a href="/page/user/order">· 全部订单</a></li>
				<li><a href="/page/user/site">· 收货地址</a></li>
				<li><a href="/page/user/coupon">· 我的优惠券</a></li>
				<li><a href="/page/user/collect">· 我的收藏</a></li>
				<li><a href="/page/user/footprint">· 我的足迹</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<div class="info_con clearfix">
					<h3 class="common_title2">基本信息</h3>
					<div class="site_con">
						<form class="layui-form" action="" lay-filter="userInfoFilter">
							<input type="hidden" name="id" id="id">
							<div class="layui-form-item">
								<label class="layui-form-label">用户名</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="text" name="name" lay-verify="required" disabled autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">账号</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="text" name="account" lay-verify="required" disabled autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">头像</label>
								<div class="layui-input-inline layui-input-wrap">
									<div style="width: 132px;">
										<img width="189px" height="189px" class="layui-upload-img" id="image">
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">邮箱</label>
									<div class="layui-input-inline">
										<input type="text" name="email" disabled autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">电话</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="text" name="phone" lay-verify="required" disabled autocomplete="off" class="layui-input">
								</div>
							</div>
						</form>
						<div class="button-group">
							<button type="button" class="layui-btn layui-bg-blue" style="width: 140px" id="UpdateInfo">修改个人信息</button><br>
							<button type="button" class="layui-btn layui-bg-orange" style="width: 140px" id="UpdatePassword">修改密码</button>
						</div>
					</div>
				</div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script type="text/javascript">
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(['form'], function(){
			var form = layui.form;

			$.post(
					'/user/selectByInfoId',
					function (result) {
						if (result.code == 0) {

							$('#image').attr('src', result.data.image);
							form.render('select');
							form.val('userInfoFilter', result.data);
						}
					},
					'json'
			);
			$('#UpdateInfo').click(function() {
				layer.open({
					title: '修改个人信息',
					type: 2,
					area: ['35%', '80%'],// 宽高
					content: '/page/user/updateInfo',
				});
			})
			$('#UpdatePassword').click(function() {
				layer.open({
					title: '修改密码',
					type: 2,
					area: ['30%', '55%'],// 宽高
					content: '/page/user/updatePassword',
				});
			})

		});

		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>